<template>
    <div id="line" ref="line">
        
    </div>
</template>

<script>
export default {
    props:{
        option:{
            type:Object,
            default:function(){
                return {
                    xAxis: {
                        type: 'category',
                        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: [820, 932, 901, 934, 1290, 1330, 1320],
                        type: 'line',
                        smooth: true
                    }]
                }
            }
        }
    },
    data(){
        return {
            echarts:null
        }
    },
    watch:{
        option:{
            // immediate:true,
            handler:function(val){
                console.log(val)
                this.init();
            }
        }
    },
    methods:{
        init(){
            // console.log(this.$echarts)
            if(this.echarts){
                this.echarts.dispose()
            }
           this.echarts = this.$echarts.init(this.$refs.line);
           this.echarts.setOption(this.option);
        }
    },
    mounted(){
        this.init();
    }
}
</script>

<style lang="scss" scoped>
    #line{
        width: 100%;
        height: 100%;
    }
</style>